.ldsEllipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 20px;

  div {
      position: absolute;
      top: 35%;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: #fff;
      animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }


    &.sizeM{
      div {
        width: 10px;
        height: 10px;
      }
    }

    &.sizeS{
      div {
        width: 12px;
        height: 12px;
      }
    }

    
    &.sizeL{
      div {
        width: 15px;
        height: 15px;
      }
    }

    &.default{
      div{
        background: var(--inverted-main-color);
      }
    }
    &.gray{
     div{
      background: var(--text-color);
     }
    }
    &.primary{
     div{
      background: var(--blue_500);
     }
    }

    &.white{
      div{
        background: #fff;
       }
    }
}

.ldsEllipsis div:nth-child(1) {
  left: 8px;
  animation: ldsEllipsis1 0.6s infinite;
}
.ldsEllipsis div:nth-child(2) {
  left: 8px;
  animation: ldsEllipsis2 0.6s infinite;
}
.ldsEllipsis div:nth-child(3) {
  left: 32px;
  animation: ldsEllipsis2 0.6s infinite;
}
.ldsEllipsis div:nth-child(4) {
  left: 56px;
  animation: ldsEllipsis3 0.6s infinite;
}
@keyframes ldsEllipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ldsEllipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes ldsEllipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}